%h3
  = @html_title
  = link_to '新建轮显图', new_carousel_path, class: 'btn btn-xs btn-primary'

%table.table.table-condensed.table-bordered
  %tr
    %th{width: '5%'} 序号
    %th{width: '20%'} 轮显图
    %th{width: '20%'} 链接
    %th{width: '20%'} 状态
    %th{width: '15%'} 操作
    %th{width: '20%'} 排序
  - @carousels.each do |carousel|
    %tr
      %td= carousel.order_num
      %td
        %img{src: carousel.picture_src.try(:url), width: '200px', height: '100px'}
      %td
        = link_to carousel.picture_link, carousel.http_picture_link, target: '_blank'
      %td= carousel.status_text
      %td
        = link_to "#{carousel.status_unpublished? ? '发布' : '取消发布'}", "javascript:void(0)", class: 'btn btn-xs btn-primary', onclick: "publish(this)", carousel_id: carousel.id
        = link_to '编辑', edit_carousel_path(carousel), class: 'btn btn-xs btn-warning'
        = link_to '删除', carousel_path(carousel), method: :delete, class: 'btn btn-xs btn-danger', data: {confirm: '确认删除?'}
      %td
        = text_field_tag "order_num", carousel.order_num, style: "width: 50px"
        = link_to '更新排序', 'javascript:void(0)', class: 'btn btn-xs btn-primary', onclick: "update_order_num(this)", carousel_id: carousel.id

:javascript
  function publish(obj) {
    status = $(obj).text() == "发布" ? 1 : 0
    update($(obj).attr('carousel_id'), {status: status}, function() {
        $(obj).text(
          status == 1 ? '取消发布' : '发布'
        )
        $(obj).parent().prev().text(
          status == 1 ? '已发布' : '未发布'
        )
    })
  }

  function update_order_num(obj) {
    update($(obj).attr('carousel_id'), {order_num: $(obj).prev().val()}, function() { window.location.reload() })
  }

  function update(carousel_id, attributes, fn) {
    fn = fn || null
     $.ajax({
      url: '/carousels/' + carousel_id,
      method: 'put',
      dataType: 'json',
      data: {carousel: attributes},
      success: function() {
        if (fn != null) {
          fn.call()
        }
      }
    })
  }